/**
 * Created by ysl on 2017/9/19.
 */
import React, {Component} from 'react';
import {
    StyleSheet, View, Text,
    Alert, Dimensions,
    TouchableOpacity,
    StatusBar,
} from 'react-native';
import GlobalSearch from './GlobalSearch';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import CustomIcons from '../../components/CustomIcons';
import {MenuModel} from "../../components/MenuModel";
import RefreshList from '../../components/RefreshList/RefreshList';


const {height, width} = Dimensions.get('window');

const LEFT = 1, MIDDLE = 2, RIGHT = 3;


export class LoadingStart extends Component {

    static navigationOptions = ({navigation}) => ({

        title: '配载发车',
        headerRight: (<FontAwesome size={15} name="search" color="#FFF" style={{marginRight: 20}}/>),
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        let peizai = {
            code: '1021021', status: '在途中', endAdress: '燕子坞', startAdress: '圆月山庄', carNum: '川Q几个8',
            driver: '胡八一', driverTel: '138好几个8', carFee: 8,
            date: "2017-02-03", qty: 8, weight: 8, volume: 8
        };

        this.dataList = new Array;
        this.time1 = setTimeout(() => {

            for (let i = 1; i < 10; ++i) {

                if (i % 2 == 0) {
                    peizai.status = "已到达";
                    this.dataList.push(peizai);
                } else {
                    this.dataList.push(peizai);
                }
            }

            this._listRef.setData(this.dataList);
        }, 200);

        this.state = {

            isShow: false,
            currnetDirection: 0,
            rightList: ['今天', '昨天', '最近7天', '最近30天', '最近90天', '自定义时间'],
            middleList: ['全部到站', '惊雁宫', '星星峡谷', '秦岭神树', '七星鲁王宫', '西沙海底墓'],
            leftList: ['全部状态', '在途中', '已到达'],
        };

    }

    leftClick() {

        this.setState({
            isShow: !this.state.isShow,
            currnetDirection: LEFT,
        });
    }

    middleClick() {

        this.setState({
            isShow: !this.state.isShow,
            currnetDirection: MIDDLE,
        });
    }

    rightClick() {

        this.setState({
            isShow: !this.state.isShow,
            currnetDirection: RIGHT,
        });
    }

    renderItem(item) {

        return <View style={styles.item}>
            <TouchableOpacity onPress={() => {
                Alert.alert("" + item.item);
                this.setState({
                    isShow: !this.state.isShow,
                });
            }}>

                <Text style={{fontSize: 12, alignSelf: 'flex-start'}}> {item.item}</Text>

            </TouchableOpacity>
        </View>
    }

    getMenuList() {
        let direction = this.state.currnetDirection;

        switch (direction) {
            case LEFT:
                return this.state.leftList;
            case MIDDLE:
                return this.state.middleList;
            default:
                return this.state.rightList;
        }
    }


    render() {

        return (<View style={styles.container}>
            <StatusBar
                animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
                hidden={false}  //是否隐藏状态栏。
                backgroundColor={'#fff'} //状态栏的背景色
                translucent={false}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
                barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')
            >
            </StatusBar>
            <View style={{flex: 2,}}>

                <View style={{backgroundColor: "#ebecf1"}}>
                    <GlobalSearch
                        placeholder="请输入运单号或收货人电话"
                        onSearch={(value) => this.searchText(value)}
                    />
                </View>

                <View style={{width: width, backgroundColor: "#ebecf1"}}>
                    <MenuModel
                        isShow={this.state.isShow}
                        leftText={this.state.leftList[0]}
                        middleText={this.state.middleList[0]}
                        rightText={this.state.rightList[0]}
                        list={this.getMenuList()}
                        mytop={120}
                        leftClick={() => this.leftClick()}
                        middleClick={() => this.middleClick()}
                        rightClick={() => this.rightClick()}
                        renderItem={(item) => this.renderItem(item)}
                        currnetDirection={this.state.currnetDirection}
                    />
                </View>

            </View>

            <View style={{width: width, height: 2, backgroundColor: "#fff", marginTop: 5,}}/>

            <View style={{flex: 9}}>

                <View style={{width: width, height: 200, backgroundColor: "#ebecf1", position: 'relative', flex: 8,}}>

                    <RefreshList
                        ref={(list) => this._listRef = list}//引用数据
                        ItemHeight={120}//设置行高
                        onEndReached={() => this._loadMore()}
                        removeClippedSubviews={false}
                        renderItem={(item) => this.listItem(item)}
                    />
                </View>

                <View style={{width: width, height: 1, backgroundColor: "#fff",}}/>
            </View>

            <Text style={{width: width - 100, alignSelf: 'center', color: "#FFF", borderColor: '#ff0000', backgroundColor: '#ff0000',
                height: 30,fontSize: 15,textAlign: 'center', marginBottom: 40,marginTop: 10,borderWidth: 1,borderRadius: 10,paddingTop: 5, paddingBottom: 5,}}>
                新增配载
            </Text>

        </View>);
    }

    listItem(item) {

        let item1 = item.item;

        return (<View style={{width: width, backgroundColor: "#ebecf1", flexDirection: 'column', paddingTop: 15,}}>

            <View style={{width: width, flexDirection: 'row', justifyContent: 'space-between', paddingLeft: 20, paddingRight: 20}}>
                <Text style={{fontSize: 12,}}>批次号:{item1.code}</Text>
                <Text style={{fontSize: 11, color: "#2e93cb", paddingRight: 20}}>{item1.status}</Text>
            </View>

            <View style={{width: width, height: 1, backgroundColor: "#aaaaaa", marginTop: 5, marginLeft: 20, marginRight: 30}}/>

            <View style={{width: width, flexDirection: 'row', fontSize: 12, marginBottom: 8, marginTop: 8, justifyContent: 'space-between',
                marginLeft: 20, marginRight: 30, paddingRight: 40}}>

                <View style={{flexDirection: 'row',}}>
                    <Text>{item1.startAdress}</Text>
                    <FontAwesome size={10} name="long-arrow-right" color="#000"
                                 style={{marginRight: 5, marginLeft: 5}}/>
                    <Text>{item1.endAdress}</Text>
                </View>

                <Text style={{fontSize: 12,}}>{item1.carNum}</Text>
            </View>
            <View style={{fontColor: "#aaaaaa", fontSize: 11, flexDirection: 'column', marginLeft: 20, marginRight: 30}}>

                <Text>{item1.driver}({item1.driverTel})驾驶, 大车运输费{item1.carFee}</Text>
                <Text>{item1.date} 发车, 装载{item1.qty}件,{item1.weight}吨,{item1.volume}m³</Text>
            </View>

            <View style={{width: width, height: 1, backgroundColor: "#aaaaaa", marginLeft: 20, marginRight: 30, marginTop: 5, marginBottom: 5}}/>

            <View style={{fontColor: "#aaaaaa", fontSize: 13, flexDirection: 'row', justifyContent: 'flex-end', marginLeft: 20, marginRight: 30}}>

                <Text style={{padding: 5, width: 60, height: 30, backgroundColor: "#aaaaaa", textAlign: 'center'}}>到达</Text>
                <Text style={{padding: 5, width: 60, height: 30, backgroundColor: "#aaaaaa", marginLeft: 20, textAlign: 'center'}}>装车</Text>
            </View>

            <View style={{width: width, height: 6, backgroundColor: "#FFF", marginTop: 10}}/>
        </View>);
    }


    /**
     * 加载更多  数据加载
     * @private
     */
    _loadMore() {
        let peizai = {
            code: '012245', status: '在途中', endAdress: '燕子坞', startAdress: '圆月山庄', carNum: '川Q几个8',
            driver: '胡八一', driverTel: '138好几个8', carFee: 8,
            date: "2017-02-03", qty: 8, weight: 8, volume: 8
        };

        if (true) {
            this.time2 = setTimeout(() => {
                let arr = [];

                for (let i = 0; i < 4; ++i) {
                    if (i % 2 == 0) {
                        peizai.status = "已到达"
                        arr.push(peizai);
                    } else
                        arr.push(peizai);
                }

                this._listRef.addData(arr);
            }, 500);

        } else {
            this._listRef.addData([]);
        }

    }

    searchText(item) {

        if (item === undefined || item === "")
            return;

        Alert.alert(item);
    }


}

const styles = StyleSheet.create({

    container: {
        height: height,
        width: width,
        flexDirection: 'column',

    },
    item: {
        width: width,
        height: 40,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: '#aaaaaa'
    },

});
